<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router/index'
import type { TabsPaneContext } from 'element-plus'
import LContainer from '@/components/layout/LContainer.vue'
import SettingsBase from './components/SettingsBase.vue'
import SettingsSafe from './components/SettingsSafe.vue'
import SettingsBinding from './components/SettingsBinding.vue'
import SettingsNotice from './components/SettingsNotice.vue'
import SettingLogoff from './components/SettingLogoff.vue'
const route = useRoute()

const arr = [
  {
    title: '基本设置',
    name: 'base',
    component: SettingsBase,
  },
  {
    title: '安全设置',
    name: 'safe',
    component: SettingsSafe,
  },
  {
    title: '账号绑定',
    name: 'binding',
    component: SettingsBinding,
  },
  {
    title: '消息通知',
    name: 'notice',
    component: SettingsNotice,
  },
  {
    title: '注销账号',
    name: 'logoff',
    component: SettingLogoff,
  },
]

const activeName = ref(route.query.name || (arr[0].name as string))

const handleClick = (tab: TabsPaneContext) => {
  router.push({
    path: route.path,
    query: {
      name: tab.props.name,
    },
  })
}
</script>

<template>
  <LContainer>
    <el-tabs
      v-model="activeName"
      tab-position="left"
      class="h-full user-setting"
      @tab-click="handleClick"
    >
      <el-tab-pane v-for="i in arr" :key="i.name" :label="i.title" :name="i.name">
        <el-scrollbar height="100%">
          <div class="settings-box p-4">
            <div class="settings-box-title">{{ i.title }}</div>
            <div class="settings-box-container">
              <component :is="i.component" />
            </div>
          </div>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </LContainer>
</template>

<style>
.el-tabs-100 .el-tabs {
  box-sizing: border-box;
  height: 100%;
}

.user-setting .el-tabs__item.is-active {
  background-color: var(--el-color-primary-light-8);
}
</style>

<style lang="less" scoped>
.settings-box {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  height: 100%;

  &-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
  }

  &-container {
    display: flex;
    height: calc(100% - 40px);
    padding-top: 12px;
  }
}
</style>
